<template>
  <div>

    <div style="margin: 20px 20px;margin-left: 400px">
       <h1>我的借阅</h1>
    </div>
    
  <div class="bgi">
      <ul v-for="table in tableData" :key="table.id">
        <el-card style="width: 650px;margin-left:130px;margin-top:-10px">     
          <div style="margin-left: 200px;" v-if="table.userNo == admin.username" >
            <li v-if="table.userNo == admin.username" style="list-style-type: none;margin-left: -150px;font-weight: bold;font-size:20px;">图书名称：{{table.bookName}}</li>
            <li v-if="table.userNo == admin.username" style="list-style-type: none">图书标准码：{{table.bookNo}}</li>
            <li v-if="table.userNo == admin.username" style="list-style-type: none">所用积分：{{table.score}}</li>
            <li v-if="table.userNo == admin.username" style="list-style-type: none">借出日期：{{table.createtime}}</li>
            <li v-if="table.userNo == admin.username" style="list-style-type: none">借出天数：{{table.days}}</li>
            <li v-if="table.userNo == admin.username" style="list-style-type: none">归还截止日期：{{table.returnDate}}</li>       
            <li v-if="table.userNo == admin.username" style="list-style-type: none">借阅状态：{{table.status}}</li> 
            <li v-if="table.userNo == admin.username" style="list-style-type: none;font-size:20px;color: red;">过期提醒：{{table.note}}</li>   
          </div>
        </el-card>
      </ul>
  </div>

  </div>
</template>

<script>
import request from "@/utils/request";
import Cookies from 'js-cookie'

export default {
  name: 'UserBorrowList',
  data() {
    return {
      admin: Cookies.get('admin') ? JSON.parse(Cookies.get('admin')) : {},
      tableData: [],
      total: 0,
      params: {
        pageNum: 1,
        pageSize: 10,
        name: '',
        bookNo: ''
      }
    }
  },
  created() {
    this.load()
  },
  methods: {
    load() {
      request.get('/borrow/page', {
        params: this.params
      }).then(res => {
        //   console.log(res);
        if (res.code === '200') {
          this.tableData = res.data.list
          this.total = res.data.total
          console.log(this.tableData);
          console.log(this.admin);
        }
      })
    },
    reset() {
      this.params = {
        pageNum: 1,
        pageSize: 10,
        bookName: '',
        bookNo: '',
        userName: ''
      }
      this.load()
    },
    handleCurrentChange(pageNum) {
      // 点击分页按钮触发分页
      this.params.pageNum = pageNum
      this.load()
    },
    del(id) {
      request.delete("/borrow/delete/" + id).then(res => {
        if (res.code === '200') {
          this.$notify.success('删除成功')
          this.load()
        } else {
          this.$notify.error(res.msg)
        }
      })
    },
    returnBooks(row) {
      request.post("/borrow/saveRetur", row).then(res => {
        if (res.code === '200') {
          this.$notify.success('还书成功')
          this.load()
        } else {
          this.$notify.error(res.msg)
        }
      })
    }
  }
}
</script>

<style scoped>
.bgi{
  background-image: url(../../assets/bg.jpg);
}
</style>